<template>
	<view class="allhw bg-grey">
		<view class="tui-operation tui-chat-operation tui-top40 send-input animation-scale-up" :class="imEmojiShow||otherShow?'send-input-bottom-up':'send-input-bottom-down'">
		  <view class='tui-center tui-input-box'>
		    <view class="tui-voice-icon" hover-class="tui-opcity" :hover-stay-time="150">
		      <tui-icon name="imvoice" :size="20" color='#333' ></tui-icon>
		    </view>
		    <input @input="inputMessageFu" v-model="message" ref="messageInput" class="tui-chat-input"></input>
		  </view>
		  <view hover-class="tui-opcity" :hover-stay-time="150" @click="message =''" v-if="message">
		    <tui-icon name="shut" :size="10" color='#333'></tui-icon>
		  </view>
		  <view hover-class="tui-opcity" :hover-stay-time="150" @click="showImEmojiFu">
		    <tui-icon :name="imEmojiShow?'imkeyboard':'imface'" :size="20" color='#333'></tui-icon>
		  </view>
		  <view hover-class="tui-opcity" :hover-stay-time="150"  @click="showOtherOrSendFu">
			  <tui-icon v-if="message" name="send" :size="20" color='#4caf50'></tui-icon>
			  <tui-icon  v-else :name="otherShow?'close':'immore'" :size="20" color='#333'></tui-icon>
		  </view>
		</view>
		<view v-if="imEmojiShow" class="inChat-input-other bg-grey ">
			<im-emoji @selectEmoji='selectEmojiValue' :inp-message="message"></im-emoji>
		</view>
		<view v-if="otherShow" class="inChat-input-other bg-grey ">
			<im-emoji @selectEmoji='selectEmojiValue' :inp-message="message"></im-emoji>
		</view>
	</view>
</template>

<script>
	import ImEnum from '../../../sdk/enums/index.js'
	import ImConfig from '../../../sdk/config/index.js'
	export default {
		props:{
			inChatUserId:{
				type:[String ,Number],
				default:'group-100'
			},
			
			// 	id:1,
			// 	name:'波多野溪子',
			// 	nickName:'波多野溪子',
			// 	avatar:'https://cdn.quasar.dev/img/avatar.png',
			// 	type:ImEnum.OtherEnum.USER_TYPE.USER,
			// 	unReadCount :1,
			// 	lastChatTime:'10:22',
			// 	lastChatContent:"你好啊，傻逼",
			// 
			inChatUser: {
				type: Object,
				default (){
					return {						
						userId : '100',
						type:ImEnum.OtherEnum.USER_TYPE.GROUP
					} 
				}
			}
		},
		data() {
			return {
				imEmojiShow:false,
				otherShow:false,
				message:'',
				loginInfo: {}
			}
		},
		methods: {
			// {
			// 			msgId:1,
			// 			sender:1,
			// 			sendYear:'2020',
			// 			sendDay:'07-02',
			// 			sendTime:"10:45",
			// 			msgType:ImEnum.ImMsgTypeEnum.text,
			// 			msgStr:'里面有2个域名的申请和Niginx的配置',
			// 			url:'https://cdn.quasar.dev/img/mountains.jpg'
			// 		}
			senderMessage(){
				const time = new Date()
				/**
				 * 如果使用假数据 就直接把数据丢给 缓存，不走服务器
				 */
				if(ImConfig.userMock){
					let msg ={
						inChatUserId:this.inChatUserId,
						msg:[{
								msgId:1,
								sender:this.loginInfo.id,
								sendYear:time.getFullYear(),
								sendDay:time.getMonth()+'-' + time.getDate(),
								sendTime:time.getHours()+':'+time.getMinutes(),
								msgType:ImEnum.ImMsgTypeEnum.text,
								count:0,//视频或音频的长度
								msgStr:this.message,
								url:''
							}]
					}
					this.$store.dispatch(ImEnum.DataKeyEnum.addMsgDataKey,msg)
					this.message = ''	
				}else{
					const msg = {
						msgId: new Date().getTime(),
						chatType: this.inChatUser.type,
						cmd: 11,
						content: this.message,
						createTime: new Date().getTime(),
						from: this.loginInfo.id,
						group_id: this.inChatUser.type === ImEnum.OtherEnum.USER_TYPE.USER ? '' : this.inChatUser.id.replace('group-',''),
						to: this.inChatUser.type === ImEnum.OtherEnum.USER_TYPE.USER ? this.inChatUser.userId : ''  ,
						msgType: 0
					}
					const sendState = this.BenderSdk.sendMessage(msg)
					if(sendState ){//发送成功设置消息 到聊天框
						
						if( this.inChatUser.type === ImEnum.OtherEnum.USER_TYPE.USER){
							let temp = {
								inChatUserId: msg.data.groupId,
								msg: [msg]
							}
							this.$store.dispatch(ImEnum.DataKeyEnum.addMsgDataKey, temp)
						}
						this.message = ''
					}
						
				}
			},
			selectEmojiValue(value){
				this.message = value
			},
			showOtherOrSendFu(){
				if(this.message){
					this.senderMessage()
					this.imEmojiShow = false	
					this.otherShow = false
				}else{
				this.otherShow = !this.otherShow
				this.imEmojiShow = false	
				}
			},
			showImEmojiFu(){
				this.imEmojiShow = !this.imEmojiShow
				this.otherShow = false
			},
			inputMessageFu(){
				this.imEmojiShow = false
				this.otherShow = false
			}
		},
		created() {//获取当前登录人信息
			this.loginInfo = this.BenderSdk.getLoginUserInfo()
		},
	}
</script>

<style scoped>

	.send-input{
		position:fixed;
		z-index: 1;
		height: 100rpx;
		width: 100%;
	}
	.send-input-bottom-down{
			bottom: 0rpx;
	}
	.send-input-bottom-up{
			bottom: 500rpx;
	}
	.inChat-input-other{
		position:fixed;
		z-index: 1;
		bottom: 0rpx;
		height: 500rpx;
		width: 100%;
	}
</style>
